<script lang="ts" setup>
import { reactive } from 'vue'
import { NForm, NFormItem, NInput, NUpload } from 'naive-ui'
// import { javascript } from '@codemirror/lang-javascript'

const formValue = reactive({
  toolName: '',
  description: '',
  icon: null
})

const rules = {
  toolName: {
    required: true,
    trigger: ['input', 'blur'],
    message: '请输入工具名称'
  },
  description: {
    required: true,
    trigger: ['input', 'blur'],
    message: '请输入工具描述'
  }
}
</script>

<template>
  <n-form
    :model="formValue"
    label-placement="top"
    label-width="auto"
    require-mark-placement="right-hanging"
    class="w-full h-full"
    :rules="rules"
  >
    <!-- Step 1: Basic Information -->
    <n-form-item label="工具名称" path="toolName">
      <n-input
        v-model:value="formValue.toolName"
        placeholder="输入工具名称"
        class="rounded-xl bg-gray-100 toolName"
      />
    </n-form-item>
    <n-form-item label="描述" path="description">
      <n-input
        v-model:value="formValue.description"
        type="textarea"
        placeholder="输入工具描述"
        :autosize="{ minRows: 3, maxRows: 5 }"
      />
    </n-form-item>
    <n-form-item label="图标" path="icon">
      <n-upload action="/api/upload" :max="1" accept="image/*" list-type="image-card">
        点击上传
      </n-upload>
    </n-form-item>
  </n-form>
</template>
